<template>
  <mei-select
    ref="select"
    :data="page.DataSource"
    :idKey="page.DataValueField"
    :nameKey="page.DataTextField"
    :pIdKey="page.TreeLevelField"
    :cascader="true"
    :disabledKey="page.DisabledField"
    :loading="page.loading"
    filterable
    emitPath
    v-model="page.ddlvalue"
    v-bind="$attrs"
    @change="onChange"
  ></mei-select>
</template>

<script>
import { AssetA1 } from "@/api";
export default {
  data() {
    return {
      //页面控制
      page: {
        ddlvalue: "",
        DataSource: [], //数据源
        DataValueField: "", //值字段
        DataTextField: "", //显示字段
        TreeLevelField: "", //树上级ID字段
        DisabledField: "",
        loading: false
      },
      //数据
      data: {}
    };
  },
  //外部属性
  props: {
    //字段
    sysAssetA1: {
      type: Object,
      default: () => {}
    },
    //model
    ddlvalue: [String, Array, Number]
  },
  model: {
    prop: "ddlvalue",
    event: "change"
  },
  //内部方法
  methods: {
    initPage() {},
    //得到下拉数据原 并赋值
    async getDataSource(opt) {
      this.page.loading = true;
      let ddl = await AssetA1.GetAssetA1Ddl(this.sysAssetA1, opt);
      Object.assign(this.page, { ...ddl });
      // console.log(this.page);

      this.$nextTick(() => {
        //赋值
        this.page.loading = false;
      });
      this.page.ddlvalue = this.ddlvalue;
    },
    onChange(val, text) {
      this.$emit("change", val, text);
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {
    sysAssetA1: {
      handler() {
        this.getDataSource();
      },
      immediate: true
    },
    "page.ddlvalue"(val) {
      const text = this.$refs.select.getSeleteText();
      this.$emit("onChange", val, text);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
